<template>
  <div class="store_data table-theme">
    <head-title title="合作--店铺列表--店铺数据"></head-title>
    <el-button class="btn-click" type="primary" @click="onOpenPage" >店铺装修情况</el-button>
    <el-card>
      <el-row>
        <el-col
          :span="8"
          v-for="(item, index) in list"
          :key="index"
          class="col-top"
        >
          <h3 class="title-top">{{ item.title }}</h3>
          <ul class="ul-top">
            <li v-for="(data, index) in item.data" :key="index">
              <p>{{ data.title }}</p>
              <em>{{ data.num }}</em>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="marginTop: 20px">
      <div class="table-head">
        <em>门店流量</em>
        <ul>
          <li
            v-for="item in timeList"
            :key="item.id"
            :class="{ activate: item.id == timeStatus }"
            @click="setFlowStatus(item.value, item.id)"
          >
            {{ item.label }}
          </li>
        </ul>
        <div class="type-view" style="marginleft: 20px">
          <el-select
            v-model="is_group"
            placeholder="请选择"
            @change="initStoreFlow(1)"
          >
            <el-option
              v-for="item in groupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="table-head-right">
          <refresh-button @refresh="setFlowStatus"></refresh-button>
          总流量:{{ flowCount }}
        </div>
      </div>
      <el-table :data="flowList">
        <el-table-column
          label="序号"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="100">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="名字"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          label="身份"
          align="center"
          prop="role_name"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type_name"
        ></el-table-column>
        <el-table-column
          label="浏览内容"
          align="center"
          prop="where"
        ></el-table-column>
        <el-table-column
          label="查看时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column
          label="停留时间"
          align="center"
          prop="stay_time"
        ></el-table-column>
        <el-table-column
          label="浏览次数"
          align="center"
          prop="num"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="onOpenDetails(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="flowCount"
          @current-change="initStoreFlow"
          :current-page="flowPage"
          :page-size="4"
        ></el-pagination>
      </div>
    </el-card>
    <el-card style="marginTop: 20px">
      <div class="table-head">
        <em>下级管理</em>
        <ul>
          <li
            v-for="item in typeList"
            :key="item.id"
            :class="{ activate: item.id == staffStatus }"
            @click="setStaffStatus(item.value, item.id)"
          >
            {{ item.label }}
          </li>
        </ul>
        <div class="table-head-right">
          <refresh-button @refresh="setStaffStatus"></refresh-button>
          总流量:{{ staffCount }}
        </div>
      </div>
      <el-table :data="staffList">
        <el-table-column
          label="序号"
          align="center"
          prop="store_admin_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="100">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="名字"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          label="身份"
          align="center"
          prop="typeName"
        ></el-table-column>
        <el-table-column
          label="成交总金额"
          align="center"
          prop="order_price"
        ></el-table-column>
        <el-table-column
          label="推广总数"
          align="center"
          prop="extension_num"
        ></el-table-column>
        <el-table-column
          label="活跃数"
          align="center"
          prop="active_num"
        ></el-table-column>
        <el-table-column
          label="上线时间"
          align="center"
          prop="online_time"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="onOpenUserDetails(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="staffCount"
          @current-change="initStaff"
          :current-page="staffPage"
          :page-size="4"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="用户信息详情"
      :close-on-click-modal="false"
      :visible.sync="userInfoDialog"
      width="500px"
      center
      :modal-append-to-body="false"
    >
      <div class="user-info" v-if="userInfo">
        <el-avatar :size="150" :src="userInfo.heard_img"></el-avatar>
        <div class="info-exhibition">
          <p class="name">名字：{{ userInfo.nickname }}</p>
          <p class="phone">手机号码：{{ userInfo.phone }}</p>
          <p class="client">注册端：{{ userInfo.client }}</p>
          <p class="time">时间：{{ userInfo.add_time }}</p>
          <p class="role">角色：{{ userInfo.role_name }}</p>
          <p class="belong-refer">归属商家：{{ userInfo.belong_refer }}</p>
          <p class="user-Bid">推荐人ID：{{ userInfo.user_B_id }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="userInfoDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:"store_data",
  data() {
    return {
      list: [
        {
          title: "订单数据",
          data: [
            {
              title: "成交总数据",
              num: 0,
            },
            {
              title: "今日业绩",
              num: 0,
            },
            {
              title: "本周业绩",
              num: 0,
            },
            {
              title: "本月业绩",
              num: 0,
            },
            {
              title: "去年总订单",
              num: 0,
            },
            {
              title: "昨日业绩",
              num: 0,
            },
            {
              title: "上周业绩",
              num: 0,
            },
            {
              title: "上月业绩",
              num: 0,
            },
          ],
        },
        {
          title: "推广数据",
          data: [
            {
              title: "推广总数",
              num: 0,
            },
            {
              title: "今日推广",
              num: 0,
            },
            {
              title: "本周推广",
              num: 0,
            },
            {
              title: "本月总数",
              num: 0,
            },
            {
              title: "去年推广",
              num: 0,
            },
            {
              title: "昨日推广",
              num: 0,
            },
            {
              title: "上周推广",
              num: 0,
            },
            {
              title: "上月总数",
              num: 0,
            },
          ],
        },
        {
          title: "店铺流量",
          data: [
            {
              title: "流量总数",
              num: 0,
            },
            {
              title: "今日流量",
              num: 0,
            },
            {
              title: "本周流量",
              num: 0,
            },
            {
              title: "本月流量",
              num: 0,
            },
            {
              title: "去年流量",
              num: 0,
            },
            {
              title: "昨日流量",
              num: 0,
            },
            {
              title: "上周流量",
              num: 0,
            },
            {
              title: "上月流量",
              num: 0,
            },
          ],
        },
      ],
      store_id: "",
      timeList: [
        {
          id: 0,
          value: "",
          label: "全部",
        },
        {
          id: 1,
          value: "today",
          label: "今天",
        },
        {
          id: 2,
          value: "week",
          label: "本周",
        },
        {
          id: 3,
          value: "month",
          label: "本月",
        },
        {
          id: 4,
          value: "lastYear",
          label: "去年",
        },
        {
          id: 5,
          value: "yesterday",
          label: "昨天",
        },
        {
          id: 6,
          value: "lastWeek",
          label: "上周",
        },
        {
          id: 7,
          value: "lastMonth",
          label: "上个月",
        },
      ],
      typeList: [
        {
          id: 0,
          value: "",
          label: "全部员工",
        },
        {
          id: 1,
          value: 1,
          label: "管理员",
        },
        {
          id: 2,
          value: 2,
          label: "业务员",
        },
        {
          id: 3,
          value: 3,
          label: "财务",
        },
        {
          id: 4,
          value: 4,
          label: "分销商",
        },
        {
          id: 5,
          value: 5,
          label: "二级分销员",
        },
        {
          id: 6,
          value: 6,
          label: "用户",
        },
      ],
      timeStatus: 0,
      flowCount: 0,
      flowList: [],
      flowPage: 0,
      time: "",
      staffStatus: 0,
      staffCount: 0,
      staffPage: 0,
      staffList: [],
      type:"",
      groupOptions: [
        {
          value: "",
          label: "无分组",
        },
        {
          value: 1,
          label: "按人分组",
        },
        {
          value: 2,
          label: "商家分组",
        },
      ],
      is_group: 1,
      userInfo: {},
      userInfoDialog: false
    };
  },
  methods: {
    init() {
      let data = {
        store_id: this.store_id,
      };
      this.$http(this.$ApiList.StoreData, data).then((res) => {
        const { datas } = res;
        this.list[0].data[0].num = Number(datas.total_price);
        this.list[0].data[1].num = Number(datas.today_price);
        this.list[0].data[2].num = Number(datas.week_price);
        this.list[0].data[3].num = Number(datas.month_price);
        this.list[0].data[4].num = Number(datas.lastYear_price);
        this.list[0].data[5].num = Number(datas.yesterday_price);
        this.list[0].data[6].num = Number(datas.lastWeek_price);
        this.list[0].data[7].num = Number(datas.lastMonth_price);
        this.list[1].data[0].num = Number(datas.total_extension);
        this.list[1].data[1].num = Number(datas.today_extension);
        this.list[1].data[2].num = Number(datas.week_extension);
        this.list[1].data[3].num = Number(datas.month_extension);
        this.list[1].data[4].num = Number(datas.lastYear_extension);
        this.list[1].data[5].num = Number(datas.yesterday_extension);
        this.list[1].data[6].num = Number(datas.lastWeek_extension);
        this.list[1].data[7].num = Number(datas.lastMonth_extension);
        this.list[2].data[0].num = Number(datas.total_flow);
        this.list[2].data[1].num = Number(datas.today_flow);
        this.list[2].data[2].num = Number(datas.week_flow);
        this.list[2].data[3].num = Number(datas.month_flow);
        this.list[2].data[4].num = Number(datas.lastYear_flow);
        this.list[2].data[5].num = Number(datas.yesterday_flow);
        this.list[2].data[6].num = Number(datas.lastWeek_flow);
        this.list[2].data[7].num = Number(datas.lastMonth_flow);
      });
      this.initStoreFlow();
      this.initStaff();
    },
    setFlowStatus(time, id) {
      this.time = time || "";
      this.timeStatus = id || "";
      this.initStoreFlow();
    },
    setStaffStatus(data, id) {
      this.type = data || "";
      this.staffStatus = id || "";
      this.initStaff();
    },
    initStoreFlow(e) {
      this.flowPage = e;
      let data = {
        time: this.time,
        store_id: this.store_id,
        limit: 4,
        page: e ? e - 1 : 0,
        is_group: this.is_group,
      };
      this.$http(this.$ApiList.ActivityBrowseList, data).then((res) => {
        this.flowCount = res.datas.count;
        this.flowList = res.datas.data;
      });
    },
    initStaff(e) {
      this.staffPage = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: 4,
        store_id: this.store_id,
        type: this.type,
      };
      this.$http(this.$ApiList.SubordinateList, data).then((res) => {
        this.staffList = res.datas.data;
        this.staffCount = res.datas.count;
      });
    },
    onOpenPage() {
      this.$router.push({
        path: "/store_finish",
        query: { store_id: this.store_id },
      });
    },
    onOpenDetails(row) {
      this.$router.push({ path: "/foot_details", query: { id: row.user_id } });
    },
    onOpenUserDetails(row) {
      let data = {
        user_id: row.user_id,
        page: 0,
        limit: 10,
      };
      this.userInfo = [];
      this.$http(this.$ApiList.UserList, data).then((res) => {
        this.userInfo = res.datas.data[0];
        this.userInfoDialog = true;
      });
    }
  },
  created() {
    this.store_id = this.$route.query.store_id;
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.store_data {
  position: relative;
  .btn-click {
      position: absolute;
      top: 10px;
      right: 10px;
      height: 32px;
      line-height: 32px;
      background-color: #009688;
      padding: 0px 10px;
      border-color: #009688;
    }
  }
  
  .col-top {
    padding: 10px;
    padding-top: 0;
    .title-top {
      line-height: 45px;
      font-size: 16px;
      font-weight: bold;
      color: #141414;
      border-bottom: 1px solid #f8f8f8;
    }
    .ul-top {
      display: flex;
      flex-wrap: wrap;
      li {
        width: calc((100% - 60px) / 4);
        text-align: center;
        padding: 10px 0;
        p {
          margin-bottom: 10px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #808080;
        }
        em {
          font-size: 16px;
          font-family: DIN;
          font-weight: bold;
          color: #333333;
        }
        &:first-child {
          em {
            color: #f59359;
          }
        }
      }
    }
  }
  .table-head {
    display: flex;
    height: 45px;
    margin-bottom: 10px;
    em {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 45px;
      color: #141414;
    }
    ul {
      display: flex;
      margin-left: 30px;
      li {
        margin-right: 30px;
        padding-bottom: 10px;

        line-height: 45px;
        cursor: pointer;
      }
      .activate {
        border-bottom: 4px solid #34a1e0;
      }
    }
    .table-head-right{
      display: flex;
      flex-direction:row-reverse;
       flex: 1;
       height: 45px;
      line-height: 45px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
      .refresh-btn{
        height: 45px !important;
        line-height: 45px !important;
        /deep/ span{
          font-size: 14px;
        }
        /deep/ .refresh-icon{
          font-size: 24px;
        }
    }
  }
  .user-info {
    .el-avatar {
      display: block;
      margin: 0 auto;
    }
    .info-exhibition {
      margin-top: 20px;
      p {
        text-align: center;
        line-height: 30px;
        margin-bottom: 0;
      }
    }
  }
}
</style>